
import React from 'react'
import { connect } from 'dva';
import {
    Form,
    Tabs,
    message,
    Modal
} from 'antd';

import Video from './Video';
import Right from './Right';
import Footer from './Footer';
import Header from './Header';
import Left from './Left';
import Article from './Article';
import Images from './Images';
import Banner from './Banner';
import RightTwo from './RightTwo';
import RightBanner from './RightBanner';
import { UrlConfig, getConfig } from '../../../services/fetch';

import './Add.scss';
import DraftHistory from './DraftHistory';
const TabPane = Tabs.TabPane;
const { confirm } = Modal;
@connect(({ add }) => ({
    add: add
}))
@Form.create()
export default class AddVideo extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            articleShow: true,
            imgShow: false,
            bannerShow: false,
            activeKey: '1'
        }
        this.getRightValue = this.getRightValue.bind(this)
        this.getLeftValue = this.getLeftValue.bind(this)
        this.resetFields = this.resetFields.bind(this)
        window.PubSub.subscribe('editor', this.setEditor)
        // window.PubSub.subscribe('editor', this.initUpload);//解决mch加载之后，上传组件会报错
        window.PubSub.subscribe('setFileFabu', this.setFieldfabu)

        this.Footer = React.createRef();
    }
    componentDidMount() {
        let sc = document.createElement('script');
        sc.src = `${UrlConfig}/application/fcpublic/resource/js/fc-upload.js`;
        document.querySelector('body').appendChild(sc);

        let token = localStorage.getItem('token');
        let site_id = localStorage.getItem('site_id');
        // 获取权限信息
        this.props.dispatch({
            type: 'video/getQuanxian', payload: {
                data: {
                    token: token ? token : 'D3F3C235A8884AC96D5133D810B11CF5',
                    site_id: site_id ? site_id : '00000000000000000000000000000000'
                }
            }
        })
        //保存url参数
        this.props.dispatch({
            type: 'theme/setParams', data: this.props.match.params
        })


        //获取版面样式
        /**
         * 1  列表
         * 2  banner
         * 3  快讯
         * 4  服务
         */
        if (this.props.match.params.class != 'theme_edit' && this.props.match.params.class != 'theme') {   //专题是没有版面的
            let _that = this
            this.props.dispatch({
                type: 'add/getBanMian', callback: (data) => {
                    if (data) {
                        //获取当前新建的版面样式   根据样式id默认选择版面样式
                        let treeSelectId = localStorage.getItem('treeSelectedValue')
                        data.map((item, index) => {
                            if (item.children && item.children.length > 0) {
                                item.children.map((i, num) => {
                                    if (i.plate_id == treeSelectId) {
                                        /**
                                         * @Author: 戴文锋 daiwenfeng@sobey.com
                                         * @msg: 注释banner
                                         */
                                        // if (i.template_id == 2) {
                                        //     _that.setState({
                                        //         activeKey: '3'
                                        //     })
                                        //     _that.props.dispatch({ type: 'add/setActiveKey', data: '3' })
                                        // }
                                        let data = {
                                            plate_id: treeSelectId
                                        }
                                        this.child.setBanMianFields(data);
                                    }
                                })
                            }
                        })
                    }


                    //获取详情数据
                    if (this.props.match.params.video_id) {
                        this.props.dispatch({
                            type: 'add/edit',
                            data: this.props.match.params.video_id,
                            callback: (data) => {
                                let id = data.type
                                this.setState({
                                    activeKey: String(id)
                                });
                                this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
                                data.key_words = data.key_words ? data.key_words.split('|') : data.key_words;
                                data.tag = data.tag ? data.tag.split('|') : data.tag;
                                console.log(data.key_words);
                                this.setFields(data);
                                this.props.dispatch({
                                    type: "add/getInfoHistory",
                                    payload: {
                                        information_id: this.props.match.params.video_id
                                    }
                                })
                            }
                        })
                    }

                }
            })
        }else{
            //专题编辑获取详情数据
            if (this.props.match.params.class == 'theme_edit') {
                this.props.dispatch({
                    type: 'add/editGetThemeDetail',
                    data: this.props.match.params.theme_id,
                    callback: (data) => {

                        let id = data.type
                        this.setState({
                            activeKey: String(id)
                        });
                        this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
                        this.setFields(data)
                    }
                })
            }
        }





        // 获取资讯分类
        this.props.dispatch({
            type: 'add/classList'
        })
         // 获取区域
         this.props.dispatch({
            type: 'add/areaList'
        })

       
    };

    componentDidUpdate(prevProps, prevState) {
        // console.log("更新了。。。", prevProps.currentInfoDraft);//this.props和prevProps是一样的
        // console.log("更新了。。。", this.props.add.currentInfoDraft);//this.props和prevProps是一样的
        // if(window.UE && this.props.add.testContent){
        //     this.setEdiotrContent(this.props.add.testContent);
        // }
    }


    //获取表单值
    onRef = (ref) => {
        this.child = ref

    }

    onFooterRef = (ref) => {
        this.Footer = ref;
    }

    //获取表单值
    onRef2 = (ref) => {
        this.child2 = ref

    }

    //右边form
    getRightValue = () => {
        let rightData = this.child.getFieldsValue()
        if (rightData) {
            return rightData
        }
    }
    //左边form
    getLeftValue = () => {
        let leftData = this.child2.getFieldsValue()
        // console.log(leftData)
        if (leftData) {
            return leftData
        }
    }
    //获取所有值
    getFileds = () => {
        let left = this.child2.getFieldsValueTab()
        let right = this.child.getFieldsValueTab()
        let allForm = {}
        Object.assign(allForm, left, right);
        return allForm;
    }
    //订阅
    setEditor = (data) => {
        this.child2.setEditor(data);
        this.child.setEditor(data);
    }
    //重置
    resetFields = () => {
        this.child.resetFields();
        this.child2.resetFields();
    }
    //设置值
    setFields = (data) => {
        switch (data.type) {
            case 1:
                this.setState({
                    activeKey: '1'
                })
                break;
            case 2:
                this.setState({
                    activeKey: '2'
                })
                break;
            case 3:
                this.setState({
                    activeKey: '3'
                })
                break;
            default:
                break;
        }
        console.log(data,'22222222');
        setTimeout(() => {
            if (this.child.setFields) {
                this.child.setFields(data);
            }
            if (this.child2.setFields) {
                this.child2.setFields(data);
            }
        }, 0);
    }
    // 已发布设置值
    setFieldfabu = (data) => {
        //判断类型，1 文章，2图集，3banner
        if (data.type === Number(this.state.activeKey) && !data.module_name) {
            console.log(data,'usedata');
            if (this.child.setFields) {
                this.child.setFields(data);
                this.child.setState({
                    forwardNumPro: data.forwardNum,
                    thumbsNumPro: data.thumbsNum,
                    scanNumPro: data.scanNum
                })
            }

            if (this.child2.setFields) {
                this.child2.setFields(data);
            }
        } else {
            message.warning('文章类型不正确')
        }
    }

    /**
     * 确认框
     */
    showConfirm = (callback = () => { }) => {
        confirm({
            title: '新建时，如果切换稿件类型数据会自动保存，确定要切换吗?',
            onOk: () => {
                this.Footer.submitForm((res) => {
                    if (res) {
                        callback()
                    } else {
                        message.error('数据不合法')
                    }
                });
            },
            onCancel: () => {
                // console.log('Cancel');
            },
        });
    }


    /**
     * 改变pane
     */
    changePane = (activeKey) => {
        if (activeKey === '1') {
            this.props.dispatch({ type: 'add/saveMchType', data: 'editor' })
        } else {
            this.props.dispatch({ type: 'add/saveMchType', data: null })
        }

        if (this.props.add.informationInfo.type) {
            let id = this.props.add.informationInfo.type
            this.setState({
                activeKey: String(id)
            })
            this.props.dispatch({ type: 'add/setActiveKey', data: String(id) })
            message.warning('编辑不可修改数据类型')
        } else {


            this.setState({
                activeKey: activeKey
            });
            this.props.dispatch({ type: 'add/setActiveKey', data: activeKey })

            // this.showConfirm(() => {

            // });

        }
    }

    onChangeHistory = (content) => {
        let body = window.document.getElementById('ueditor_0').contentDocument.getElementsByTagName('body')[0]
        body.innerHTML = content

     }
    render() {
        const { informationInfo } = this.props.add;
       
        return (
            <div className="AddVideo">
                {informationInfo.type ? '' :
                    <Header reset={this.resetFields} setFields={this.setFields} getFileds={this.getFileds} />}
                <div className="content">
                    <div className="c-left">
                        <Left />
                    </div>
                    <div className="c-mid">
                        <Tabs className="c-mid-tab mon_tab" activeKey={this.state.activeKey} onChange={this.changePane} >
                            <TabPane className='mon_tab_pane' tab="ᠵᠣᠬᠢᠶᠠᠯ" key="1">
                                <Article className={this.state.activeKey === '1' ? 'display' : ''} onRef={this.onRef2} match={this.props.match} />
                            </TabPane>
                            {/* <TabPane tab="视频" key="2">
                                <Video getFieldDecorator={getFieldDecorator} />
                            </TabPane> */}
                            <TabPane tab="ᠵᠢᠷᠤᠭ ᠲᠡᠭᠦᠪᠦᠷᠢ" key="2">
                                {this.state.activeKey === '2' ? <Images onRef={this.onRef2} /> : null}
                            </TabPane>
                            {
                                 /**
                                         * @Author: 戴文锋 daiwenfeng@sobey.com
                                         * @msg: 注释banner
                                         */
                                /* {this.props.match.params.class != 'theme_edit' && this.props.match.params.class != 'theme' ? //专题里面不能新建banner类型的资讯
                                <TabPane tab="Banner" key="3">
                                    {this.state.activeKey === '3' ? <Banner onRef={this.onRef2} /> : null}
                                </TabPane> : ''} */}
                            {/* <TabPane tab="文本" key="4">Content of Tab Pane 3</TabPane> */}
                        </Tabs>
                    </div>
                    <div className="c-right">
                        {/* <Right getFieldDecorator={getFieldDecorator} /> */}
                        {/* {this.state.activeKey === '3' ? <RightBanner onRef={this.onRef} /> : <RightTwo type={this.props.match.params.type} onRef={this.onRef} />} */}
                        <Tabs className="c-mid-tab mon_tab">
                            <TabPane className='mon_tab_pane' tab="ᠦᠨᠳᠦᠰᠦᠨ ᠰᠤᠷᠠᠭ" key="1">
                                { /**
                                         * @Author: 戴文锋 daiwenfeng@sobey.com
                                         * @msg: 注释banner
                                         *//* {this.state.activeKey === '3' ? <RightBanner onRef={this.onRef} /> : <RightTwo type={this.props.match.params.type} onRef={this.onRef} />} */}
                                <RightTwo type={this.props.match.params.type} onRef={this.onRef} />
                            </TabPane>

                            {/* <TabPane tab="版本管理" key="2" forceRender={true}>
                               <DraftHistory draftChange={this.setFields} onChangeHistory={this.onChangeHistory} getLeft={this.getLeftValue}/>
                            </TabPane> */}
                        </Tabs>
                    </div>
                </div>
                <div className="footer">
                    <Footer
                        getLeft={this.getLeftValue}
                        getRight={this.getRightValue}
                        reset={this.resetFields}
                        type={this.props.match.params.type}
                        id={this.props.match.params.video_id}
                        class={this.props.match.params.class}
                        themeId={this.props.match.params.theme_id}
                        onRef={this.onFooterRef}
                    />
                </div>
                <div id="fcUpload"></div>
                <div id="fcUploadvideo"></div>
                <div id="fcUploadaudio"></div>
                <div id="fcUploadimg"></div>
            </div>
        )
    }
}
